<template>
  <div class="admin-edit">
    <el-card>
      <el-form
        ref="formRef"
        :model="form"
        :rules="rules"
        label-width="100px"
        style="max-width: 500px; margin: 0 auto"
      >
        <el-form-item label="用户名" prop="userName" required>
          <el-input v-model="form.userName" maxlength="20" />
        </el-form-item>
        <el-form-item label="密码" prop="password" required>
          <el-input v-model="form.password" type="password" maxlength="32" show-password />
        </el-form-item>
        <el-form-item label="真实姓名" prop="realName" required>
          <el-input v-model="form.realName" maxlength="20" />
        </el-form-item>
        <el-form-item label="年龄" prop="age">
          <el-input v-model.number="form.age" type="number" min="0" max="120" />
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-radio-group v-model="form.sex">
            <el-radio :label="1">男</el-radio>
            <el-radio :label="2">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="出生日期" prop="birthDay">
          <el-date-picker
            v-model="form.birthDay"
            type="date"
            value-format="YYYY-MM-DD"
            placeholder="选择日期"
          />
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="form.phone" maxlength="20" />
        </el-form-item>
        <el-form-item label="状态" prop="status" required>
          <el-radio-group v-model="form.status">
            <el-radio :label="1">启用</el-radio>
            <el-radio :label="0">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :loading="loading" @click="handleSubmit">提交</el-button>
          <el-button :disabled="loading" @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import UserAPI from "@/api/system/user.api";
import { ElMessage } from "element-plus";

const route = useRoute();
const router = useRouter();
const formRef = ref();
const loading = ref(false);

const form = reactive({
  id: 0,
  userName: "",
  password: "",
  realName: "",
  age: undefined,
  sex: undefined,
  birthDay: "",
  phone: "",
  status: 1,
});

const rules = {
  userName: [{ required: true, message: "请输入用户名", trigger: "blur" }],
  password: [{ required: true, message: "请输入密码", trigger: "blur" }],
  realName: [{ required: true, message: "请输入真实姓名", trigger: "blur" }],
  status: [{ required: true, message: "请选择状态", trigger: "change" }],
};

function handleSubmit() {
  formRef.value?.validate((valid: boolean) => {
    if (!valid) return;
    loading.value = true;
    const payload = { ...form };
    UserAPI.editAdmin(payload)
      .then(() => {
        ElMessage.success("保存成功");
        router.back();
      })
      .catch(() => {
        ElMessage.error("保存失败");
      })
      .finally(() => {
        loading.value = false;
      });
  });
}

function handleReset() {
  if (form.id) {
    fetchDetail(form.id);
  } else {
    Object.assign(form, {
      userName: "",
      password: "",
      realName: "",
      age: undefined,
      sex: undefined,
      birthDay: "",
      phone: "",
      status: 1,
    });
  }
}

function fetchDetail(id: number) {
  loading.value = true;
  UserAPI.getAdminDetail(id)
    .then((data: any) => {
      Object.assign(form, data);
    })
    .finally(() => {
      loading.value = false;
    });
}

onMounted(() => {
  const id = Number(route.query.id);
  if (id) {
    form.id = id;
    fetchDetail(id);
  } else {
    Object.assign(form, {
      id: null,
      userName: "",
      password: "",
      realName: "",
      age: undefined,
      sex: undefined,
      birthDay: "",
      phone: "",
      status: 1,
    });
  }
});
</script>

<style scoped lang="scss">
.admin-edit {
  padding: 32px 0;
}
</style>
